<script lang="ts" setup>
import { useTheme } from "@/hooks/useTheme"
const { activeThemeName } = useTheme()
const props = defineProps({
  buttonTop: {
    type: Number,
    default: 350
  }
})

const drawer = ref(false)
const buttonTopCss = props.buttonTop + "px"

const styleColor = computed(() => activeThemeName.value === 'light' ? (drawer ? 'pink' : 'primary') : '')
</script>

<template>
  <div>
    <v-btn icon="mdi-cog" style="z-index:999999" :color="styleColor" :theme="activeThemeName"
      @click.stop="drawer = !drawer" class="setting-btn">
    </v-btn>
    <v-card style="z-index:99999" :theme="activeThemeName">
      <v-layout>
        <v-navigation-drawer v-model="drawer" temporary location="right">
          <slot />
        </v-navigation-drawer>
      </v-layout>
    </v-card>
  </div>
</template>

<style lang="scss" scoped>
.setting-btn {
  width: 50px;
  height: 30px;
  position: fixed;
  // v-bind 绑定样式
  top: v-bind(buttonTopCss);
  right: 0px;
  border-radius: 6px 0 0 6px;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
}
</style>
